<template>
  <a :class="[getClass]" :title="config.text" @click="click">
      <span class="hover">
          <span class="smallImg"></span>
          <span class="posa color-bot" :style="{background: color}"></span>
      </span>
      <i :class="[getIconClass]" @click.stop="drop"></i>
  </a>
</template>

<script>
  import { Observer } from '../../core/util'
  export default {
    props: ['config'],
    data: function () {
        return {
            color: this.config.color
        };
    },
    created: function () {
        var self = this;
        Observer.register('colorchange', function (cmd, color) {
            if (self.config.cmd === cmd) {
                self.color = color;
            }
        });
    },
    computed: {
        getClass: function () {
          return (this.config.classList || []);
        },
        getIconClass: function () {
          return (this.config.iconClass || []);
        }
    },
    methods: {
        click: function () {
            Observer.fire('execCommand', [this.config.cmd, this.color]);
        },
        drop: function () {
            Observer.fire('showcolorlist', this.config.cmd);
            Observer.fire('showcloth');
        }
    }
  }
</script>